<template>
    <div class="home">
        <h3>State测试</h3>
        <div>
            <p>{{ a }}----{{ A }} --- {{ ATen }}</p>
            <button @click="$store.commit('addA', 10)">addA</button>
            <p>{{ b }}----{{ B }} --- {{ BTen }}</p>
            <button @click="$store.commit('addB', 2)">addB</button>
        </div>

    </div>
</template>

<script>
// @ is an alias to /src
import { mapState } from "vuex";

// var a = {a:1}
// var b = {b:2}
// var c = {c:3}

// var obj= {
//     ...a,  // a:1
//     ...b,
//     ...c
// }

// mapState() 函数返回一个对象
var res = mapState({
    // 箭头函数写法
    // a:(state)=> state.a,
    // b:(state)=> state.b,

    // 计算属性名   state["状态名"]
    a: "a",  // 等价于 a:(state)=> state.a,
    b: "b",  // 等价于 a:(state)=> state.a,
    A: "a",  // 等价于 a:(state)=> state.a,
    B: "b",  // 等价于 a:(state)=> state.a,

    ATen: function (state) {
        // this->当前实例
        return state.a + this.count
    },
    BTen: function (state) {
        return state.b + this.count
    },



})
console.log("res",res);

export default {
    name: 'OtherView',
    data() {
        return {
            count: 10,
        }
    },
    computed: {
        // 派生值或衍生 (实例上  -> 根据this.$store.state.xxx数据 得到新值)
        // 自己写 -> 麻烦
        // a(){ // this.a;
        //     return this.$store.state.a;
        // },
        // b(){ // this.b;
        //     return this.$store.state.b;
        // },

        // mapState() 辅助函数返回一个对象 (键名就是计算属性的名称 键值可以是函数,字符串)
        // ...mapState()  展开对象 -> 将键值对放到新对象中  
        ...mapState({
            // 赋值给同名属性
            // 箭头函数写法
            // a:(state)=> state.a,
            // b:(state)=> state.b,

            // 计算属性名   state["状态名"]
            // a: "a",  // 等价于 a:(state)=> state.a,
            // b: "b",  // 等价于 a:(state)=> state.a,

            // 换一个新的名字
            A: "a",  // 等价于 a:(state)=> state.a,
            B: "b",  // 等价于 a:(state)=> state.a,

            // 新属性 还可以依赖于当前实例的数据
            ATen: function (state) {
                // this->当前实例
                return state.a + this.count
            },
            BTen: function (state) {
                return state.b + this.count
            },
        }),
        ...mapState(["a","b"]),
    },
    mounted() {
        console.log(this);
        console.log(this.$store);
        console.log(this.$store.state);
    }
}
</script>
